<template>
  <div class="dashboard-container">
    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <!-- 战术方案概况 - 饼图 -->
      <el-col :span="6">
        <el-card class="chart-card">
          <div class="chart-wrapper">
            <div id="pieChart" class="chart"></div>
            <div class="chart-title">战术方案概况</div>
            <div class="chart-stats">
              运行: 24, 执行中: 6, 已完成: 18, 失败: 2
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 运营概况 - 柱状图 -->
      <el-col :span="6">
        <el-card class="chart-card">
          <div class="chart-wrapper">
            <div id="barChart1" class="chart"></div>
            <div class="chart-title">运营概况</div>
            <div class="chart-stats">
              生产环境: 8, 测试环境: 6, 仿真环境: 4
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 本周概况数据趋势 - 折线图 -->
      <el-col :span="6">
        <el-card class="chart-card">
          <div class="chart-wrapper">
            <div id="lineChart" class="chart"></div>
            <div class="chart-title">本周概况数据趋势</div>
            <div class="chart-stats">
              周一到周日: 2, 1, 3, 2, 1, 2, 1
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 本周历史趋势 - 柱状图 -->
      <el-col :span="6">
        <el-card class="chart-card">
          <div class="chart-wrapper">
            <div id="barChart2" class="chart"></div>
            <div class="chart-title">本周历史趋势</div>
            <div class="chart-stats">
              周一到周日: 80%, 85%, 90%, 88%, 87%, 86%, 89%
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 操作按钮区域 -->
    <el-row :gutter="20" class="action-row">
      <el-col :span="24">
        <div class="action-buttons">
          <el-button type="primary" @click="createScene">
            <el-icon><Plus /></el-icon>
            新建场景
          </el-button>
          <el-button type="success" @click="startDeduction">
            <el-icon><VideoPlay /></el-icon>
            开始推演
          </el-button>
          </div>
      </el-col>
    </el-row>

    <!-- 通知中心 -->
    <el-row :gutter="20" class="notification-row">
      <el-col :span="24">
        <el-card class="notification-card">
          <template #header>
            <div class="notification-header">
              <h4>通知中心</h4>
            </div>
          </template>
          <div class="notification-list">
            <div class="notification-item" v-for="(notification, index) in notifications" :key="index">
              <el-icon class="notification-icon"><Warning /></el-icon>
              <span class="notification-time">[{{ notification.time }}]</span>
              <span class="notification-content">{{ notification.content }}</span>
                </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

const router = useRouter()

// 通知数据
const notifications = ref([
  {
    time: '12:01',
    content: '战术方案"渗透演练"已行到完成状态，请查看'
  },
  {
    time: '11:45',
    content: '新建演习"协议演练任务"已导入'
  },
  {
    time: '10:30',
    content: '系统检测到异常流量，请确认情况，已发给告警'
  }
])

// 图表实例
let pieChartInstance = null
let barChart1Instance = null
let lineChartInstance = null
let barChart2Instance = null

// 初始化饼图
const initPieChart = () => {
  const chartDom = document.getElementById('pieChart')
  if (!chartDom) return
  
  pieChartInstance = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        fontSize: 10
      }
    },
    series: [
      {
        name: '方案状态',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 24, name: '运行', itemStyle: { color: '#5cb3ff' } },
          { value: 6, name: '执行中', itemStyle: { color: '#4ade80' } },
          { value: 18, name: '已完成', itemStyle: { color: '#fbbf24' } },
          { value: 2, name: '失败', itemStyle: { color: '#f87171' } }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  pieChartInstance.setOption(option)
}

// 初始化运营概况柱状图
const initBarChart1 = () => {
  const chartDom = document.getElementById('barChart1')
  if (!chartDom) return
  
  barChart1Instance = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['生产环境', '测试环境', '仿真环境'],
      axisLabel: {
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 10
      }
    },
    series: [
      {
        name: '环境数量',
        type: 'bar',
        data: [
          { value: 8, itemStyle: { color: '#4ade80' } },
          { value: 6, itemStyle: { color: '#5cb3ff' } },
          { value: 4, itemStyle: { color: '#a855f7' } }
        ],
        barWidth: '60%'
      }
    ]
  }
  barChart1Instance.setOption(option)
}

// 初始化折线图
const initLineChart = () => {
  const chartDom = document.getElementById('lineChart')
  if (!chartDom) return
  
  lineChartInstance = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel: {
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 10
      }
    },
    series: [
      {
        name: '数据趋势',
        type: 'line',
        data: [2, 1, 3, 2, 1, 2, 1],
        smooth: true,
        lineStyle: {
          color: '#5cb3ff'
        },
        itemStyle: {
          color: '#5cb3ff'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(92, 179, 255, 0.3)' },
              { offset: 1, color: 'rgba(92, 179, 255, 0.1)' }
            ]
          }
        }
      }
    ]
  }
  lineChartInstance.setOption(option)
}

// 初始化历史趋势柱状图
const initBarChart2 = () => {
  const chartDom = document.getElementById('barChart2')
  if (!chartDom) return
  
  barChart2Instance = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c}%'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel: {
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLabel: {
        formatter: '{value}%',
        fontSize: 10
      }
    },
    series: [
      {
        name: '完成率',
        type: 'bar',
        data: [80, 85, 90, 88, 87, 86, 89],
        itemStyle: {
          color: '#fbbf24'
        },
        barWidth: '60%'
      }
    ]
  }
  barChart2Instance.setOption(option)
}

// 新建场景
const createScene = () => {
  router.push('/scene/list')
}

// 开始推演
const startDeduction = () => {
  ElMessage.success('开始推演功能开发中...')
}

// 响应式处理
const handleResize = () => {
  if (pieChartInstance) pieChartInstance.resize()
  if (barChart1Instance) barChart1Instance.resize()
  if (lineChartInstance) lineChartInstance.resize()
  if (barChart2Instance) barChart2Instance.resize()
}

onMounted(() => {
  nextTick(() => {
    initPieChart()
    initBarChart1()
    initLineChart()
    initBarChart2()
    
    // 监听窗口大小变化
    window.addEventListener('resize', handleResize)
  })
})

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (pieChartInstance) {
    pieChartInstance.dispose()
    pieChartInstance = null
  }
  if (barChart1Instance) {
    barChart1Instance.dispose()
    barChart1Instance = null
  }
  if (lineChartInstance) {
    lineChartInstance.dispose()
    lineChartInstance = null
  }
  if (barChart2Instance) {
    barChart2Instance.dispose()
    barChart2Instance = null
  }
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background: var(--el-bg-color-page);
  min-height: calc(100vh - 50px);
  }

.charts-row {
    margin-bottom: 20px;
}

.chart-card {
  height: 280px;

  .chart-wrapper {
    height: 100%;
      display: flex;
    flex-direction: column;
    
    .chart {
      flex: 1;
      min-height: 180px;
    }
    
    .chart-title {
      text-align: center;
      font-weight: bold;
      font-size: 14px;
      color: var(--el-text-color-primary);
      margin-bottom: 8px;
    }
    
    .chart-stats {
      text-align: center;
      font-size: 12px;
      color: var(--el-text-color-regular);
      line-height: 1.5;
    }
  }
}

.action-row {
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  
  .el-button {
    padding: 12px 24px;
    font-size: 16px;
    
    .el-icon {
      margin-right: 8px;
    }
  }
}

.notification-row {
  .notification-card {
    .notification-header {
      h4 {
        margin: 0;
        color: var(--el-text-color-primary);
      }
    }
    
    .notification-list {
      .notification-item {
      display: flex;
      align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--el-border-color-lighter);
        
        &:last-child {
          border-bottom: none;
        }
        
        .notification-icon {
          color: #fbbf24;
          margin-right: 8px;
          font-size: 16px;
        }
        
        .notification-time {
          color: var(--el-text-color-regular);
          font-size: 12px;
          margin-right: 8px;
          min-width: 50px;
        }
        
        .notification-content {
          color: var(--el-text-color-primary);
          font-size: 14px;
          flex: 1;
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 1200px) {
  .charts-row {
    .el-col {
      margin-bottom: 20px;
    }
  }
}

@media (max-width: 768px) {
  .action-buttons {
    flex-direction: column;
    
    .el-button {
      width: 100%;
    }
  }
}
</style>